<template>
    <div class="table-action-page" :class="{left: align == 'left'}">
        <div v-for="(item, index) in list" :key="index">
            <span
                v-if="!item.showIcon"
                :class="item.textClass"
                @click="onClick(item.key)"
                >{{ item.title }}</span
            >
            <n-tooltip trigger="hover" v-else>
                <template #trigger>
                    <i
                        class="iconfont"
                        :class="item.class"
                        @click="onClick(item.key)"
                    ></i>
                </template>
                {{ item.title }}
            </n-tooltip>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    align: {
        type: String,
        default: () => "center"
    }
})

const emits = defineEmits('action')

const onClick = (key) => {
    emits('action', key)
}
</script>
<style lang="less" scoped>
.table-action-page {
    display: flex;
    align-items: center;
    justify-content: center;
    &.left {
        justify-content: flex-start
    }
    gap: 0 8px;
    span {
        color: var(--primary-color);
        cursor: pointer;
        &:hover {
            text-decoration: underline;
        }
        &.delete {
            color: var(--error-color);
        }
    }
    i {
        font-size: 16px;
        cursor: pointer;
        color: var(--primary-color);
        &.delete {
            color: var(--error-color);
        }
    }
}
</style>
